<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">

<title>drag and drop 기능</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>

<style>

div.draggable {
	float:left;
	width: 160px;
	height: 160px;
	padding:10px 0px 0px 20px;
	background:url(post.png) no-repeat;
}

div.invert {  background:url(post2.png) no-repeat;}


</style>

</head>

<body>




<div class="draggable">
	<p>title</p>
</div>

<div  class="draggable">
	<p>Lorem ipsum dolor <br /> sit amet, consecteturlit. Aenean</p>    
</div>

<div  class="draggable">
	<p>Drag me around</p>
</div>

<div id ="gg" class="draggable">
	<p>Drag me around</p>
	<img src="img/effect1.jpg" width="130" height="80" />
</div>

<script>


$(".draggable").draggable({
	cursor:'move',
	stack:".draggable",
	opacity:0.7    
});   

$( ".draggable" ).bind( "dragstart", function(event, ui) {
	$(this).addClass("invert");
});		
$( ".draggable" ).bind( "dragstop", function(event, ui) {
	$(this).removeClass("invert")
});		 
</script>
</body>
</html>














